<template>  
    <div class="header-content">
      <!-- 面包屑导航 -->
      <div class="breadcrumb-container">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
            {{ item }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      
      <!-- 用户信息组件 -->
      <navUserInfo />
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import navUserInfo from '@/components/navigation/navUserInfo.vue'

const route = useRoute()

// 计算面包屑导航
const breadcrumbList = computed(() => {
  return route.meta.breadcrumb || ['首页']
})
</script>

<style scoped>
.header {
  padding: 0;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.header-content {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.breadcrumb-container {
  flex: 1;
}
</style>